<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>你的世代身份</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background: #f8f9ff;
            text-align: center;
            padding: 40px;
        }
        .result-card {
            max-width: 500px;
            margin: 30px auto;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 6px 16px rgba(0,0,0,0.1);
            animation: popIn 0.8s ease;
        }
        @keyframes popIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* 代际主题色 */
        .gen-z      { border-top: 5px solid #ff6b6b; background: #fff0f0; }
        .millennial { border-top: 5px solid #4ecdc4; background: #f0fdfc; }
        .gen-x      { border-top: 5px solid #ffd166; background: #fff9e6; color: #333; }
        .boomer     { border-top: 5px solid #6a4c93; background: #f5f0ff; }
        .other      { border-top: 5px solid #9b9b9b; background: #f8f8f8; }

        h2 { margin-top: 0; color: #333; }
        .tagline { font-size: 18px; margin: 15px 0; font-weight: bold; }
        .desc { color: #555; line-height: 1.6; }
        a { display: inline-block; margin-top: 20px; color: #6a5acd; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>

<%
    String name = request.getParameter("name");
    String ageStr = request.getParameter("age");
    Integer age = null;
    if (ageStr != null && ageStr.matches("\\d+")) {
        age = Integer.parseInt(ageStr);
    }
    request.setAttribute("name", name);
    request.setAttribute("age", age);
%>

<!-- 动态设置卡片样式 -->
<div class="result-card
  <c:if test="${age >= 10 && age <= 25}">gen-z</c:if>
  <c:if test="${age >= 26 && age <= 40}">millennial</c:if>
  <c:if test="${age >= 41 && age <= 55}">gen-x</c:if>
  <c:if test="${age >= 56 && age <= 75}">boomer</c:if>
  <c:if test="${age < 10 || age > 75 || age == null}">other</c:if>
">

    <h2>🎉 世代探测结果</h2>

    <!-- 安全输出用户名 -->
    <p>你好，<strong><c:out value="${name}" default="时空旅人"/></strong>！</p>

    <!-- 根据年龄判断世代 -->
    <c:if test="${age >= 10 && age <= 25}">
        <div class="tagline">你是 🌈 Z 世代！</div>
        <p class="desc">互联网原住民，表情包十级学者，一边整顿职场，一边收藏电子木鱼。</p>
    </c:if>

    <c:if test="${age >= 26 && age <= 40}">
        <div class="tagline">你是 💼 千禧一代！</div>
        <p class="desc">经历过非典、金融危机，也见证了移动支付崛起。又卷又佛，但依然相信明天。</p>
    </c:if>

    <c:if test="${age >= 41 && age <= 55}">
        <div class="tagline">你是 🧠 X 世代！</div>
        <p class="desc">夹在父母养老和孩子教育之间，是沉默的中流砥柱。微信只用来收通知。</p>
    </c:if>

    <c:if test="${age >= 56 && age <= 75}">
        <div class="tagline">你是 🌿 婴儿潮一代！</div>
        <p class="desc">经历过物质匮乏，也见证了国家腾飞。养生茶配短视频，活得比年轻人还潮！</p>
    </c:if>

    <c:if test="${age < 10 || age > 75 || age == null}">
        <div class="tagline">你是 👁️ 神秘观察者！</div>
        <p class="desc">你超越了时代的标签——或许是未来穿越者，或许是历史亲历者。向你致敬！</p>
    </c:if>

    <a href="age-form.html">🔄 再测一次</a>

</div>

</body>
</html>
